<template>
  <sc-title title="质量指标列表"></sc-title>
    <sc-form-table
      v-model="dataList"
      :addTemplate="addTemplate"
      drag-sort
      placeholder="暂无数据"
      copyExcel
      :excelMap = "excelMap"
    >
      <template #tableContent>
        <el-table-column prop="number" label="编号" width="200">
          <template #default="scope">
            <el-input
              v-model="scope.row.number"
              placeholder="不输入则默认生成"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="产品中文名" width="200">
          <template #default="scope">
            <el-input
              v-model="scope.row.name"
              placeholder="请输入产品中文名"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="质量要求" width="350">
          <template #default="scope">
            <el-input v-model="scope.row.remark" type="textarea" :rows="3"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="顺序" width="150">
        <template #default="scope">
          <el-input-number
          style="width: 100%;"
            v-model="scope.row.itemIndex"
          ></el-input-number>
        </template>
      </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              active-value="normal"
              inactive-value="disable"
            >
            </el-switch>
          </template>
        </el-table-column>

      </template>
    </sc-form-table>
    
    <div class="button-position" style="margin-top:20px">
      <el-button @click="updateVisible">取 消</el-button>
      <el-button type="primary" @click="addQuality">确 定</el-button>
    </div>
</template>
<script setup>
import { reactive, ref, onMounted, watch } from 'vue';
import { ElNotification } from 'element-plus';
import { Check, Close } from '@element-plus/icons-vue';
import Api from '@/api/model/pm'
import scFormTable from '@/components/scFormTable/index.vue'
import scTitle from '@/components/scTitle/index.vue'
import { deepClone } from '@/utils/arr';
const emit = defineEmits(["updatetable"]);
const dataList = ref([])
const addTemplate = ref({})
const excelMap = {
    name:'',
    remark:'',
    status:'normal',
    number:''
}
onMounted(()=>{
    getInit()
})
const getInit = async()=>{
    let res = await Api.qualityindex.add.post()
    if(res.code === '200'){
        addTemplate.value = res.dtl
        dataList.value.push(deepClone(addTemplate.value))
        
    }
}
const updateVisible = (val) => {
  emit("updatetable");
};
const addQuality = async ()=>{
    let params = {
        dataList:dataList.value.filter(ele=>{return ele.name})
    }
    let res = await Api.qualityindex.save.post(params)
    if (res.code == 200) {
    ElNotification.success({
      title: "",
      message: "添加成功！",
      duration: 2000,
    });
    emit("updatetable", true);
  }

}
</script>